import { defineComponent } from "vue";
import "../style/pubTablecss.scss";
import imgLoader from "@/assets/images/nodata.png";

export default defineComponent({
	props: {
		tableData: Object, // 确保类型匹配
	},

	setup(props, context) {
		const handleSelectionChange = (selection) => {
			context.emit("selected-items", selection);
		};
		const handleSingleSelect = (val) => {
			// console.log("单选", val);
		};
		let indexMethod = (index) => {
			return index + 1 + props.tableData.pager.pageSize * (props.tableData.pager.pageIndex - 1);
		};

		return () => (
			<el-table
				class="mTable"
				header-row-class-name="table-header-class"
				row-class-name="table-row-class"
				highlight-current-row
				default-sort={props.tableData.sortRule}
				data={props.tableData.data}
				style={{ width: "100%" }}
				onSelection-change={handleSelectionChange}
				onSelect={handleSingleSelect}
				flexible
				v-slots={{
					empty: () => (
						<div style={{ "padding-top": "30px", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
							<img src={imgLoader} style={{ width: "100px", height: "100px" }}></img>
							<span style={{ display: "block", height: "40px", lineHeight: "40px" }}>暂无数据</span>
						</div>
					),
				}}
			>
				{props.tableData.clums.map((item, index) => !item.hide && <el-table-column fixed={item.fixed} key={item.props} type={item.type || null} prop={item.props} sortable={item.sortable} label={item.label} width={item.width || null} min-width={item.minWidth || null} show-overflow-tooltip={true} align={item.align} v-slots={item.render} index={indexMethod}></el-table-column>)}
			</el-table>
		);
	},
});
